【openlayers学习笔记】vue3 + vite + openlayers 绘制图形 |
您所在的位置：网站首页 › vue 绘图 › 【openlayers学习笔记】vue3 + vite + openlayers 绘制图形 |
【openlayers学习笔记】vue3 + vite + openlayers 绘制图形
|
openlayer绘制图形主要使用ol/interaction/Draw类，通过map.addInteraction()实现交互式绘制图形. 定义绘图组件由于是使用vue开发的项目，因此，我将绘图工具封装成了一个组件，通过传递事件的方式实现子组件给父组件传值，先看一下DrawFeature.vue。主要功能包括绘制点、折线、曲线、圆形、正方形、矩形、规则多边形、不规则多边形以及取消绘制和清除功能。 // DrawFeature.vue 绘制图形 请选择 点 折线 曲线 圆形 正方形 矩形 规则多边形 不规则图形 取消绘制 清除 复制代码 // DrawFeature.vue .drawFeature { width: 113px; padding: 10px; position: fixed; top: 100px; right: 10px; background-color: #7C9ABE; outline: 5px solid rgba(255, 255, 255, 0.5); border-radius: 10px; z-index: 100; // 标题样式 .title { color: #f0f0f0; text-align: center; } // 选择框样式 .select { display: block; margin: 5px auto; border: none; } // 按钮样式 .clearFeature, .cancelDraw { margin-top: 10px; text-align: center; border-radius: 10px; background-color: #F6F5F1; cursor: pointer; } } 复制代码vue3接收父组件传递过来的事件通过defineEmits()来接收，返回的函数可以直接调用，通过传递事件名和参数来触发事件。 // DrawFeature.vue import { ref, watch } from 'vue'; const emits = defineEmits(["drawInteraction"]); // 接收事件 // 绘制图形的类型名 const featureName = ref(null); // 监听类型名的变化，发生变化时提交事件 watch(featureName, newVal => { if (newVal) { emits("drawInteraction", newVal); } }) // 取消绘制 function cancelDraw() { featureName.value = null; // 类型名置空 emits("drawInteraction", "Cancel"); // 提交事件 } // 清空绘制的图形 function clearFeature() { featureName.value = null; // 类型名置空 emits("drawInteraction", "Clear"); // 提交事件 } 复制代码 父组件绘制图形通过自定义事件的方式接受子组件传递过来的类型名 // Home.vue 复制代码在地图上添加一个矢量图层，作为绘图的图层 // 初始化一个矢量图层 const vectorLayer = ref(new VectorLayer({ name: "Vector" })) map.value = new Map({ // 存放地图的容器 target: "mapDiv", // 设置图层 layers: [ // osm图层 OSMLayer.value, // 天地图图层 tianLayer.value, // 矢量图层 vectorLayer.value ], // 设置视图 view: new View({ center: [113.300839, 23.048857], // 中心点坐标 zoom: 10, // 缩放等级 projection: "EPSG:4326" // 坐标系 }), 复制代码初始化所要用到的ol类库，封装绘图函数 // Home.vue // 创建一个空的Draw const draw = ref(null); // 初始化矢量图层 const vectorLayer = ref(null); // 定义一个geometryFunction let geometryFunction; // 封装绘制图形函数 function drawFea(map, draw, layer, type, source, geometryFunction, freehand) { // 判断source是否为空，若为空，创建一个VectorSource对象，并设置为矢量图层的源 if (!source.value) { source.value = new VectorSource({ wrapX: false }) layer.value.setSource(source.value); } // 创建绘图工具 draw.value = new Draw({ type, // 绘制图形类型 source: source.value, // 绘制的目标源 geometryFunction, // 绘图的几何函数 freehand // 绘图时鼠标点击后是否松手进行绘制 }); // 给地图添加绘图交互 map.value.addInteraction(draw.value); } 复制代码定义事件触发时调用的函数，通过判断类型名，进行不同的处理。 // Home.vue // 绘图事件函数 function drawInteraction(val) { if (draw.value) { // 判断draw是否为空，若不为空移除上一个绘图交互 map.value.removeInteraction(draw.value); } switch (val) { case "Cancel": // 取消绘制 break; case "Clear": // 清空绘制 vectorSource.value = null; // 矢量图层源置空 vectorLayer.value.setSource(vectorSource.value); // 设置空的矢量图层源 break; case "Curve": // 绘制曲线 drawFea(map, draw, vectorLayer, "LineString", vectorSource, undefined, true); break; case "ArbPolygon": // 绘制不规则图形 drawFea(map, draw, vectorLayer, "Polygon", vectorSource, undefined, true); break; case "Square": // 绘制正方形 // 定义一个4条边的多边形几何函数 geometryFunction = createRegularPolygon(4) drawFea(map, draw, vectorLayer, "Circle", vectorSource, geometryFunction, false); break; case "Rectangle": // 绘制矩形 // 定义一个矩形几何函数 geometryFunction = createBox() drawFea(map, draw, vectorLayer, "Circle", vectorSource, geometryFunction, true); break; default: // 绘制点、圆、折线、规则多边形 geometryFunction = undefined; drawFea(map, draw, vectorLayer, val, vectorSource, undefined, false); } } 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |